<template>
  <el-row justify="space-between" :gutter="20">
    <el-col :span="12">
      <ContentWrap>
        <el-form
          class="-mb-15px"
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="68px"
           style="margin-bottom: 12px"
        >
          <el-row class="head-box">
            <el-col :span="6">
              <div class="title">新增广告排行</div>
            </el-col>
            <el-col :span="18" style="display: flex; justify-content: flex-end">
              <el-form-item label="" prop="status" style="margin-bottom: 0">
                <el-select
                  v-model="queryParams.status"
                  class="!w-180px"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="dict in []"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="status" style="margin-bottom: 0">
                <el-select
                  v-model="queryParams.status"
                  class="!w-180px"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="dict in []"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-button link>
                更多
                <Icon icon="ep:arrow-right" />
              </el-button>
            </el-col>
          </el-row>
          <el-form-item label="抓取时间" prop="grabTime" style="margin: 0 12px 0 0">
            <el-date-picker
              v-model="queryParams.grabTime"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              class="!w-240px"
              end-placeholder="结束日期"
              start-placeholder="开始日期"
              type="daterange"
              value-format="x"
            />
          </el-form-item>
          <DateRangeBtns @set="setDateRangeType" :DateRangeType="DateRangeType" />
        </el-form>

        <el-table v-loading="loading" :data="addRinkingList" row-key="id" border>
          <el-table-column align="center" prop="userName" label="用户" />
          <el-table-column align="center" prop="userName" label="行业" />
          <el-table-column align="center" prop="userName" label="点赞" />
          <el-table-column align="center" prop="userName" label="评论" />
          <el-table-column align="center" prop="userName" label="收藏" />
          <el-table-column align="center" prop="userName" label="分享" />
          <el-table-column
            align="center"
            prop="userName"
            label="抓取时间"
            :formatter="dateFormatter"
          />
          <el-table-column
            align="center"
            prop="userName"
            label="发布时间"
            :formatter="dateFormatter"
          />
        </el-table>
      </ContentWrap>
    </el-col>
    <el-col :span="12">
      <ContentWrap>
        <el-row>
          <el-col :span="12">
            <div class="title head-box">热度爬升排行</div>
          </el-col>
          <el-col :span="12" style="display: flex; justify-content: flex-end">
            <el-button link>
              更多
              <Icon icon="ep:arrow-right" />
            </el-button>
          </el-col>
        </el-row>
        <el-form
          class="-mb-15px"
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="爬升时间" prop="code">
            <el-date-picker
              v-model="queryParams.grabTime"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              class="!w-240px"
              end-placeholder="结束日期"
              start-placeholder="开始日期"
              type="daterange"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-form>
        <Table
          :columns="allSchemas.tableColumns"
          :data="tableObject.tableList"
          :loading="tableObject.loading"
          :pagination="{
            total: tableObject.total
          }"
          v-model:pageSize="tableObject.pageSize"
          v-model:currentPage="tableObject.currentPage"
          border
        />
      </ContentWrap>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { allSchemas } from './rankinglist.data'
import { dateFormatter } from '@/utils/formatTime'
import * as MateriaApi from '@/api/system/materia'
import { DICT_TYPE } from '@/utils/dict'

const { tableObject, tableMethods } = useTable({
  getListApi: (): any => {
    return new Promise((resolve, reject): void => {
      resolve({
        code: 0,
        data: {
          list: [
            {
              mail: '7684413@qq.com',
              username: '7684413@qq.com',
              password: '123457',
              host: '127.0.0.1',
              port: 8080,
              sslEnable: false,
              id: 1,
              createTime: 1674639592000
            },
            {
              mail: 'ydym_test@163.com',
              username: 'ydym_test@163.com',
              password: 'WBZTEINMIFVRYSOE',
              host: 'smtp.163.com',
              port: 465,
              sslEnable: true,
              id: 2,
              createTime: 1674667563000
            }
          ],
          total: 2
        },
        msg: ''
      })
    })
  }, // 分页接口
  delListApi: (): any => {}, // 删除接口
  defaultParams: {

  }
})

// 获得表格的各种操作
const { getList, setSearchParams } = tableMethods

const DateRangeType:Ref<string | timeRnage> = ref('all')
interface timeRnage{
  type: string,
  time1: number,
  time2: number
}
const setDateRangeType = (data:timeRnage) => {
  console.log(data)
  DateRangeType.value = data.type
  queryParams.grabTime = [data.time1, data.time2] || ''
  console.log(queryParams)
}

/** 初始化 **/
onMounted(() => {
  getList()
})

const loading = ref(false) // 列表的加载中
const list = ref([
  {
    id: 123,
    video:
      'https://v3-default.ixigua.com/3f4e5acfcb00ba22816aef9cbbab9f08/667f70e3/video/tos/cn/tos-cn-ve-15/oQEeAJYeHXjMFDQgQZQMOF8MIa4XAte8CM8ne2/?a=2011&ch=0&cr=0&dr=0&net=5&cd=0%7C0%7C0%7C0&cv=1&br=2538&bt=2538&cs=0&ds=3&ft=4zenzjjM9Xpxesq4ZmCThSVKlcL4xYQ2bLPQGQpuZmkaY3&mime_type=video_mp4&qs=0&rc=aTs3N2g0OTtmOzQ1ZTs8Z0BpM2Z4ZXM5cmY7czMzNGkzM0AuMzRiXmA2NV4xNDY0MTA1YSMwcnBsMmRzX3JgLS1kLTBzcw%3D%3D&btag=80000e00010000&dy_q=1719624384&feature_id=59cb2766d89ae6284516c6a254e9fb61&l=2024062909262418FB1BE88BC65C0FDD02',
    desc: '描述',
    user: '用户',
    type: 1,
    page: 'www.baidu.com',
    tag: ['sdf', 'ffd'],
    payImage: 'http://imageurl',
    truthName: '剧名66',
    accuracyRate: '754711',
    groupName: '大力集团',
    name: '名称',
    realId: 54675746,
    verifyStatus: 2,
    industry: 'dfgdsf',
    secondIndustru: 'string',
    likeNum: 456,
    collectNum: 23,
    shareNum: 234,
    releaseTime: '2024年6月28日 18点34分',
    grabTime: '2024年6月28日 18点34分'
  }
])
interface Query {
  pageNo: number,
  pageSize: number,
  grabTime:Array<string>[]

}
const queryParams = reactive<Query>({
  pageNo: 1,
  pageSize: 10,
  grabTime: []
})

const queryFormRef = ref() // 搜索的表单
const refreshTable = ref(true) // 重新渲染表格状态

const exRinkingList = ref<MateriaApi.MaterialVO[]>([{}]) // 用户列表

/** 搜索按钮操作 */
const handleQuery = () => {}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.pageNo = 1
  queryFormRef.value.resetFields()
  handleQuery()
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  font-weight: bold;
}
.head-box {
  margin-bottom: 28px;
}
.el-form {
  margin-bottom: 4px;
}
</style>
